<template>
  <div>
    <Subject
      :returnTop="returnTop"
      :btnTitle="'新增目录'"
      :search_title_1="'标签名称'"
      :search_title_2="'状态'"
      :counts="counts"
      :pageSize="pagesize"
      @currentPage="handelCurrentPage"
      @sizeChange="handelSizeChange"
      @addSubBtn="handelAddSubBtn"
      @searchSelect="handelSearchSelect"
      @search="handelSearch"
    >
      <template #table>
        <el-table :data="tagList">
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
          ></el-table-column>
          <el-table-column prop="tagName" label="标签名称"></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template #default="{ row }">
              <span>{{ row.addDate | dateformat }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="state"
            label="状态"
            :formatter="handelForm"
          ></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                type="text"
                v-text="row.state === 1 ? '禁用' : '启用'"
                @click="state(row)"
              ></el-button>
              <el-button type="text" @click="change(row)" :disabled="row.state"
                >修改</el-button
              >
              <el-button type="text" @click="del(row.id)" :disabled="row.state"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </Subject>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="所属学科">
          <!-- <el-input placeholder="请选择" v-model="form.subName"></el-input> -->
          <el-select
            style="width: 340px"
            v-model="form.subjectName"
            placeholder="请选择"
            @focus="handleFocus"
            @change="selectChange"
          >
            <el-option
              v-for="item in tagList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectID"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input
            placeholder="请输入标签名称"
            v-model="form.tagName"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Subject from '@/components/Subject'
import { status } from '@/api/hmmm/constants'
import {
  getTagInfo,
  searchTags,
  addTags,
  delTags,
  editTags,
  changeState
} from '@/api/subject'
export default {
  components: {
    Subject
  },
  data () {
    return {
      btnTitle: '',
      title: '',
      query: {
        subjectName: null,
        state: null,
        page: 1,
        pagesize: 10,
        subjectID: null
      },
      counts: null,
      pagesize: null,
      tagList: [],
      dialogVisible: false,
      form: {
        id: '',
        subjectID: '',
        subjectName: null,
        tagName: null
      },
      rules: {
        tagName: [{ required: true, message: '标签名称不能为空' }]
      },
      returnTop: false
      // subjectNameList: []
    }
  },
  created () {
    this.getTagInfo()
  },
  methods: {
    async getTagInfo () {
      // 如果是跳转过来的，拿着id去渲染页面，否则原始数据渲染
      if (this.$route.query.id) {
        this.returnTop = true
        this.query.subjectID = this.$route.query.id
      } else {
        this.query.subjectID = null
      }
      const { data } = await getTagInfo(this.query)
      this.counts = data.counts
      this.pagesize = +data.pagesize
      this.tagList = data.items
      console.log(this.tagList)
    },
    // 页码更改视图更新
    async handelCurrentPage (val) {
      this.query.page = val
      this.getTagInfo()
    },
    // 每页显示数改变视图更新
    handelSizeChange (size) {
      this.query.pagesize = size
      this.getTagInfo()
    },
    // 点击新增标签按钮，显示弹出框
    handelAddSubBtn () {
      this.dialogVisible = true
    },
    // 弹出框的下拉列表
    async handleFocus () {
      this.query.pagesize = 99999
      this.getTagInfo(this.query)
    },
    // 搜索框下拉菜单获取的值，是number的值
    async handelSearchSelect (value) {
      this.query.state = value
    },
    // 第一个搜索框内容和点击提交，回车提交函数
    async handelSearch (searchForm) {
      this.query.tagName = searchForm.input1
      await searchTags(this.query)
      this.getTagInfo()
      searchForm.input1 = ''
      searchForm.input2 = ''
    },
    // 关闭弹框
    handelClose () {
      this.form = {
        subjectName: '',
        tagName: ''
      }
      this.$refs.form.resetFields()
    },
    // 点击修改
    change (row) {
      this.title = '修改目录'
      this.dialogVisible = true
      // 回显
      console.log(row)
      this.form.id = row.id
      this.form.subjectName = row.subjectName
      this.form.tagName = row.tagName
      this.form.subjectID = row.subjectID
    },
    // 当option改变的时候，此事件可以获取学科的id值，也是option的value
    selectChange (value) {
      this.form.subjectID = value
    },
    // 提交确认按钮
    async submit () {
      try {
        await this.$refs.form.validate()
        if (this.title === '修改目录') {
          this.query = await editTags(this.form)
          this.getTagInfo()
          this.$message.success('修改成功')
        } else {
          await addTags(this.form)
          this.getTagInfo()
          this.$message.success('新增成功')
        }
      } catch (error) {
        console.log(error)
      } finally {
        this.dialogVisible = false
        this.form = {}
      }
    },
    // 删除
    async del (id) {
      await this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delTags(id)
      this.getTagInfo()
      this.$message.success('删除成功')
    },
    // 禁用启用状态格式化
    handelForm (row, column, cellValue, index) {
      // 要去找 1所对应的值
      const obj = status.find((item) => item.value === row.state)
      return obj ? obj.label : '未知'
    },
    // 点击启用，禁用状态取反，其余按钮禁止
    async state (row) {
      const data = {
        id: row.id,
        state: row.state === 0 ? 1 : 0
      }
      await changeState(data)
      this.getTagInfo()
      this.disabled = true
      this.$message.success('状态修改成功')
    }
  }
}
</script>

<style scoped lang="scss"></style>
